<template>
    <view style="height: 100%">
        <!-- 选项卡 -->
        <view class="tabs">
            <tabs :tabMenu="tabMenu" @checkIndex="checkIndex"></tabs>
        </view>
        <!-- 卡券 -->
        <view>
            <view v-if="tabsIndex == 2" class="card_list_wrap">
                <view class="card_list" v-for="(item, index) in useCouponList" :key="index">
                    <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/historyCardVoucher.png" class="card_list_bg"></image>

                    <view class="card_left">
                        <view class="crad_left_money">
                            <text class="money_type">￥</text>
                            <text class="money_amonut">{{ item.couponAmount }}</text>
                        </view>
                        <view class="voucher_type" v-if="item.applyStationType == 1">通用券</view>
                        <view class="voucher_type" v-if="item.applyStationType == 2">站点专属</view>
                        <view class="voucher_type" v-if="item.applyStationType == 3">指定条件</view>
                    </view>

                    <view class="card_right">
                        <view class="card_right_top">
                            <view>
                                <view class="coupon_type" v-if="item.type == 1">服务费券</view>
                                <view class="coupon_type" v-if="item.type == 2">电费券</view>
                                <view class="coupon_type" v-if="item.type == 3">现金券</view>
                                <view class="full_reduction">满{{ item.meetAmount }}可用</view>
                            </view>
                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/sx.png" class="sx"></image>
                        </view>
                        <view class="validity_date flex-row-start">
                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/icon1.png" class="time_icon" />
                            {{ item.receiveTime }}
                        </view>
                        <view class="validity_date flex-row-start">
                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/icon2.png" class="time_icon" />
                            {{ item.expireTime }}
                        </view>
                    </view>
                </view>
                <!-- <view class="loading" wx:if="{{loading}}">
            <van-loading type="spinner" size="40rpx" />
        </view> -->
            </view>
            <view v-if="tabsIndex == 3" class="card_list_wrap">
                <view class="card_list" v-for="(item, index) in cancelCouponList" :key="index">
                    <!-- <u-tabs :right-width="70" async-close @close="onClose($event, { index, id: item.id })" :data-index="index" :data-id="item.id" class="van-swipe-cell">
                        <u-cell-group class="van-cell-group">
                            <u-cell class="van-cell"> -->
                                <u-swipe-action autoClose>
						<u-swipe-action-item
										:options="options"
										autoClose
										@click="click(item.id)"
						>
                                <view class="card_list">
                                    <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/historyCardVoucher.png" class="card_list_bg"></image>
                                    <view class="card_left">
                                        <view class="crad_left_money">
                                            <text class="money_type">￥</text>
                                            <text class="money_amonut">{{ item.couponAmount }}</text>
                                        </view>
                                        <view class="voucher_type" v-if="item.applyStationType == 1">通用券</view>
                                        <view class="voucher_type" v-if="item.applyStationType == 2">站点专属</view>
                                        <view class="voucher_type" v-if="item.applyStationType == 3">指定条件</view>
                                    </view>
                                    <view class="card_right">
                                        <view class="card_right_top">
                                            <view class="card_right_title">
                                                <view class="coupon_type" v-if="item.type == 1">服务费券</view>
                                                <view class="coupon_type" v-if="item.type == 2">电费券</view>
                                                <view class="coupon_type" v-if="item.type == 3">现金券</view>
                                                <view class="card_status" v-if="item.status == 3">
                                                    <text>已过期</text>
                                                </view>
                                                <view class="card_status" v-if="item.status == 4">
                                                    <text>已作废</text>
                                                </view>
                                                <view class="card_status" v-if="item.status == 5">
                                                    <text>退款冻结</text>
                                                </view>
                                                <view class="card_status" v-if="item.status == 6">
                                                    <text>退款核销</text>
                                                </view>
                                            </view>
                                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/failure.png" class="sx"></image>
                                        </view>
                                        <view class="full_reduction">满{{ item.meetAmount }}可用</view>
                                        <view class="validity_date flex-row-start">
                                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/icon1.png" class="time_icon" />
                                            {{ item.receiveTime }}
                                        </view>
                                        <view class="validity_date flex-row-start">
                                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/icon2.png" class="time_icon" />
                                            {{ item.expireTime }}
                                        </view>
                                    </view>
                                </view>
                            </u-swipe-action-item>
					</u-swipe-action>
                            <!-- </u-cell>
                        </u-cell-group>
                        <view slot="right" class="van-swipe-cell__right">
                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/icon.png" class="delete-icon"></image>
                            <view class="delete-text">删除</view>
                        </view>
                    </u-tabs> -->
                </view>
                <!-- <view class="loading" wx:if="{{loading}}">
            <van-loading type="spinner" size="40rpx" />
        </view> -->
            </view>
        </view>
        <Upgrading v-if="tabsIndex == 2 && !useCouponList.length" text="暂无内容"></Upgrading>
        <Upgrading v-if="tabsIndex == 3 && !cancelCouponList.length" text="暂无内容"></Upgrading>

        <!-- 站点弹窗 -->
        <!-- <van-popup   
    bind:close="onClose"   
    position='center'
    show="{{deleteVisible}}"         
    custom-style="border-radius: 16rpx;"  
    class="delete-popup"   
>    
    <view class="delete">
        <view  class="delete-content">
            <view class="delete-title">确定删除此券？</view>
        </view>
        <view class="delete-btn">  
            <view class="delete-cancel" bindtap="deleteCancel">取消</view>
            <view class="delete-confirm" bindtap="deleteConfirm">确定</view>
        </view>
    </view>
</van-popup> -->
        <!-- <u-dialog id="van-dialog" /> -->
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
import tabs from '../../../components/tabs/tabs.vue';
// import vanSwipeCell from './@vant/weapp/swipe-cell/index';
import Upgrading from '@/marketing_page/components/upgrading/upgrading.vue';
// import vanPopup from './@vant/weapp/popup/index';
// import vanDialog from './@vant/weapp/dialog/index';
// import vanLoading from './@vant/weapp/loading/index';
// mine/pages/historyCardVoucher/historyCardVoucher.ts
// import Dialog from '../../../miniprogram_npm/@vant/weapp/dialog/dialog';
import { getMyCouponPage, myCouponDelete } from '../../../api/https';
import { pageCancelCoupon, pageUseCoupon, deleteCoupon } from '../../../api/marketing/coupon';
// import { requestAnimationFrame } from './miniprogram/miniprogram_npm/@vant/weapp/common/utils';
export default {
    components: {
        tabs,
        // vanSwipeCell,
        Upgrading,
        // vanPopup,
        // vanDialog,
        // vanLoading
    },
    data() {
        return {
            options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c',
						height:'220rpx'

					}
				}],
            tabMenu: ['已使用', '已失效'],
            tabsIndex: 2,
            cardList: [],
            deleteVisible: false,
            deleteId: null,
            instances: '',
            eData: null,
            loading: false,
            page: 1,
            pageNum: 0,
            config: {
                current: 1,
                size: 10
            },
            config1: {
                current: 1,
                size: 10
            },
            cancelCouponList: [],
            useCouponList: []
        };
    },
    onLoad: function () {
        // this.CouponPage(1)
        this.pageCancelCoupon();
        this.pageUseCoupon();
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        // this.data.page = 1
        // if (this.data.cardList.length) {
        //   wx.showNavigationBarLoading(); //在标题栏中显示加载图标
        // }
        // this.CouponPage(4)
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        if (this.tabsIndex == 2) {
            this.pageCancelCoupon();
        } else {
            this.pageUseCoupon();
        }
    },
    methods: {
        // 已失效列表
        async pageCancelCoupon() {
            try {
                const res = await pageCancelCoupon(this.config);
                let list = res.data.records || [];
                this.setData({
                    cancelCouponList: [...this.cancelCouponList, ...list]
                });
                this.config.current++;
            } catch (error) {}
        },

        // 已使用列表
        async pageUseCoupon() {
            try {
                const res = await pageUseCoupon(this.config1);
                let list = res.data.records || [];
                this.setData({
                    useCouponList: [...this.useCouponList, ...list]
                });
                this.config1.current++;
            } catch (error) {}
        },

        // 删除优惠券
        async deleteCoupon(id: string | number, cb: any) {
            try {
                const res = await deleteCoupon({
                    id
                });
                if (res.code == 200) {
                    cb & cb();
                }
            } catch (error) {}
        },

        checkIndex(e: any) {
            const { detail } = e;
            switch (detail) {
                case 0:
                    this.setData({
                        tabsIndex: 2,
                        page: 1
                    });
                    break;
                case 1:
                    this.setData({
                        tabsIndex: 3,
                        page: 1
                    });
                    break;
            }
            // this.CouponPage(this.data.tabsIndex)
        },

        // 获取卡券列表
        CouponPage(index: any) {
            const tmp = this;
            tmp.setData({
                loading: true
            });
            getMyCouponPage({
                tab: tmp.tabsIndex,
                current: tmp.page,
                size: 10
            }).then((res: any) => {
                if (res.code == 0) {
                    // 总数据
                    const total = res.data.total;
                    const pageNum = Math.ceil(total / 10);
                    let cardList;
                    switch (index) {
                        // 已使用
                        case 2:
                            cardList = res.data.records;
                            break;
                        // 已失效
                        case 3:
                            cardList = res.data.records;
                            break;
                        // 下拉刷新
                        case 4:
                            cardList = res.data.records;
                            uni.hideNavigationBarLoading(); //在标题栏中隐藏加载图标
                            if (cardList.length) {
                                uni.stopPullDownRefresh();
                            } else {
                                setTimeout(() => {
                                    uni.stopPullDownRefresh();
                                }, 100);
                            }
                            break;
                        // 页面初始化及上拉加载
                        case 1:
                            cardList = cardList = tmp.cardList.concat(res.data.records);
                            break;
                    }
                    tmp.setData({
                        cardList,
                        loading: false,
                        pageNum
                    });
                } else if (res.code == 4) {
                    let cardList: any = [];
                    tmp.setData({
                        cardList
                    });
                }
            });
        },

        // couponDelete(e: any){
        //     const {currentTarget:{dataset:{id}}} = e
        //     if(id){
        //         this.setData({
        //             deleteId:id
        //         })
        //     }
        // },
        deleteCancel() {
            this.setData({
                deleteVisible: false
            });
        },

        onClose(e: any, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            const tmp = this;
            const {
                currentTarget: {
                    dataset: { id, index }
                }
            } = e;
            if (id) {
                this.setData({
                    deleteId: id
                });
            }
            const { position, instance } = e.detail;
            switch (position) {
                case 'left':
                case 'cell':
                    instance.close();
                    break;
                case 'right':
                    // Dialog.confirm({
                    //     message: '确定删除此券?'
                    // })
                    //     .then(() => {
                    //         tmp.deleteCoupon(id, () => {
                    //             instance.close();
                    //             tmp.cancelCouponList.splice(index, 1);
                    //             tmp.setData({
                    //                 cancelCouponList: [...tmp.cancelCouponList]
                    //             });
                    //         });
                    //     })
                    //     .catch(function (err: any) {
                    //         console.log(err);
                    //     });
                    // break;
            }
        },

        deleteConfirm() {
            const tmp = this;
            tmp.page = 1;
            myCouponDelete({
                id: tmp.deleteId
            }).then((res: any) => {
                if (res.code == 0) {
                    tmp.setData({
                        deleteVisible: false
                    });
                    tmp.CouponPage(3);
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
@import '../../../commin/commin.less';
// .tabs {
//     position: fixed;
//     top: 0;
//     z-index: 99;
// }
// page {
    // padding-top: 90rpx;
    // padding-bottom: 20px;
// }
.time_icon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
}
.card_list_wrap {
    .paddings (20rpx,0rpx,4rpx,24rpx);
    .card_list {
        .position (relative, 0, 0, 0, 0);
        .kuangao (702rpx,220rpx);
        margin-bottom: 16rpx;
        .card_list_bg {
            .kuangao (100%,100%);
        }
        .card_tags {
            .position (absolute, 16rpx, auto, auto, 16rpx);
            .kuangao (78rpx,33rpx);
        }
        .card_left {
            .position (absolute, 64rpx, 0, 0, 0);
            .kuan (230rpx);
            .textalign();
            .crad_left_money {
                font-family: PingFang SC;
                font-weight: bold;
                color: @white-color;
                .money_type {
                    .fontsize (26rpx);
                }
                .money_amonut {
                    .fontsize (52rpx);
                }
            }
            .voucher_type {
                .fontsize (26rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @white-color;
            }
        }
        .card_right {
            .position (absolute, 39rpx, 0, 0, 276rpx);
            .card_right_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .coupon_type {
                    .fontsize (34rpx);
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: @text-color2;
                }
                .verification {
                    .paddings (5rpx,16rpx,5rpx,16rpx);
                    .fontsize (22rpx);
                    .borders (1rpx,@text-color4);
                    color: @text-color4;
                    margin-left: 16rpx;
                    background: rgba(144, 147, 153, 0.06);
                    border-radius: 16rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                }

                .sx {
                    .kuan (84rpx);
                    .gao (71rpx);
                    .position (absolute,7rpx,56rpx,auto,auto);
                }
                .card_right_title {
                    display: flex;
                }
            }
            .coupon_stations {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .stations {
                    .fontsize (26rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #707485;
                    margin-right: 46rpx;
                }
            }
            .validity_date {
                .fontsize (24rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
            }
        }
    }
}
.van-swipe-cell__right {
    .kuangao (140rpx,220rpx);
    .textalign();
    background: @orange;
    .flexs();
    .delete-icon {
        .kuangao (40rpx,43rpx);
        margin-bottom: 41rpx;
    }
    .delete-text {
        .fontsize (24rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @white-color;
    }
}
.delete-popup {
    .kuangao (590rpx,300rpx);
    .delete {
        background: @white-color;
        .delete-title {
            .fontsize (34rpx);
            .textalign();
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color1;
            .margins (100rpx,auto,119rpx,auto);
        }
        .delete-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            .delete-cancel {
                width: 220rpx;
                height: 88rpx;
                border: 1rpx solid #909399;
                border-radius: 44rpx;
                font-size: 30rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #909399;
                .textalign();
                line-height: 88rpx;
            }
            .delete-confirm {
                .kuangao (220rpx,88rpx);
                .textalign();
                .fontsize (30rpx);
                background: linear-gradient(105deg, #2b99ff, #1b8cf5);
                box-shadow: 0rx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
                border-radius: 44rpx;
                line-height: 88rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: @white-color;
                margin-left: 30rpx;
            }
        }
    }
}
.loading {
    .textalign();
}

/*删除背景*/
.van-overlay {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/*删除弹窗样式*/
.van-dialog__message {
    height: 100rpx;
    line-height: 100rpx !important;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #303133;
}

.van-dialog__button .van-button__text {
    width: 251rpx;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    background: linear-gradient(105deg, #2b99ff, #1b8cf5);
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
}

.van-dialog__button:nth-child(1) .van-button__text {
    border: 1rpx solid #909399 !important;
    background: #ffffff;
    color: #909399;
}

.van-dialog__footer {
    margin-bottom: 41rpx;
}

.card_status {
    margin-left: 15rpx;
    height: 35rpx;
    line-height: 35rpx;
    border: 1rpx solid #cccfd4;
    border-radius: 16rpx;
    padding: 0 10rpx;
    display: flex;
    > text {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccfd4;
    }
}

.full_reduction {
    .fontsize (26rpx);
    .margins (15rpx,0,15rpx,0);
    font-family: PingFang SC;
    font-weight: 500;
    color: #606266;
}
</style>